<template>
  <div class="order-back-detail">

    <el-card shadow="never" style="margin: 30px;">
      <div slot="header">
        <span>退单明细</span>
      </div>
      <!-- 退单状态 -->
      <div class="order-base-section">
        <div class="order-title">
          <span class="title-text">退单状态:</span>
          <span v-if="orderReturnApply.status=== 0" class="order-status-text">待处理</span>
          <span v-if="orderReturnApply.status=== 1" class="order-status-text">已同意,退货中</span>
          <span v-if="orderReturnApply.status=== 2" class="order-status-text">已完成</span>
          <span v-if="orderReturnApply.status=== 3" class="order-status-text">已拒绝</span>
        </div>
        <div class="base-info-detail">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <p>订单编号:
                <!--文档: # https://router.vuejs.org/zh/api/#to -->
                <router-link style="color: blue" :to="{name: 'orderDetail',params: {id: orderReturnApply.orderId}}">{{ orderReturnApply.orderId }}</router-link>
              </p>
            </el-col>
            <el-col :span="6">
              <p>退单人姓名: {{ orderReturnApply.returnName }}</p>
            </el-col>
            <el-col :span="6">
              <p>退单理由: {{ orderReturnApply.reason }}</p>
            </el-col>
            <el-col :span="12">
              <p>退单描述: {{ orderReturnApply.description }}</p>
            </el-col>
            <el-col :span="6">
              <p>申请时间: {{ orderReturnApply.createTime }}</p>
            </el-col>
          </el-row>

        </div>
      </div>
      <el-divider />
      <!-- 商品详情 -->
      <div class="order-base-section">
        <div class="order-title">
          <span class="title-text">退货商品:</span>
        </div>
      </div>
      <el-divider />
      <!-- 用户信息 -->
      <div class="order-base-section">
        <div class="order-title">
          <span class="title-text">用户信息:</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <p>客户端用户名: {{ orderReturnApply.memberUsername }}</p>
          </el-col>
          <el-col :span="6">
            <p>退货人姓名: {{ orderReturnApply.returnName }}</p>
          </el-col>
          <el-col :span="6">
            <p>联系人电话: {{ orderReturnApply.returnPhone }}</p>
          </el-col>
        </el-row>

      </div>
      <el-divider />
      <!-- 费用信息 -->
      <div class="order-base-section">
        <div class="order-title">
          <span class="title-text">费用信息:</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <!-- productRealPrice 商品实际支付单价,一般退货需要依赖商品真实价格 -->
            <p>退款金额: {{ orderReturnApply.productRealPrice | money }}</p>
          </el-col>
          <!-- 这里展示的是同意退款了,具体退了多少,和商品的金额可能不一致,比如折旧,损坏等 -->
          <el-col v-if="orderReturnApply.status===1 || orderReturnApply.status===2" :span="6">
            <p>实际所退金额: {{ orderReturnApply.returnAmount | money }}</p>
          </el-col>
          <el-col :span="6">
            <p>运费: {{ 0 }}</p>
          </el-col>
        </el-row>
        <!-- 退款记录 -->
        <el-row v-if="orderReturnApply.status>0">
          <el-col :span="6">
            <p>处理人: {{ orderReturnApply.handleMan }}</p>
          </el-col>
          <el-col :span="12">
            <p>处理说明: {{ orderReturnApply.handleNote }}</p>
          </el-col>
          <el-col :span="6">
            <p>处理时间: {{ orderReturnApply.handleTime }}</p>
          </el-col>
        </el-row>
        <!-- 接受退款处理 -->
        <el-row v-if="orderReturnApply.status>1">
          <el-col :span="6">
            <p>收货人: {{ orderReturnApply.receiveMan }}</p>
          </el-col>
          <el-col :span="12">
            <p>处理说明: {{ orderReturnApply.receiveNote }}</p>
          </el-col>
          <el-col :span="6">
            <p>处理时间: {{ orderReturnApply.receiveTime }}</p>
          </el-col>
        </el-row>
        <el-form ref="form" :model="returnForm" label-width="120px" :inline="false" size="mini">
          <el-row :gutter="20">
            <!-- 退款金额应该在状态为待处理才显现 -->
            <el-col v-if="orderReturnApply.status === 0" :span="6">
              <el-form-item label="退款金额">
                <el-input-number v-model="returnForm.returnAmount" placeholder="单位:分" size="mini" />
              </el-form-item>
            </el-col>
            <!-- 如果完成了这两个没必要显示 -->
            <el-col v-if="orderReturnApply.status < 2" :span="6">
              <el-form-item label="处理人">
                <el-input v-model="returnForm.handleMan" size="mini" />
              </el-form-item>
            </el-col>
            <el-col v-if="orderReturnApply.status < 2" :span="12">
              <el-form-item label="备注说明">
                <el-input v-model="returnForm.handleNote" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-divider />
      <!-- 退货按钮 -->
      <div style="text-align:center;">
        <!-- 同意退货或者拒绝应该在待处理的时候显示 -->
        <el-button v-if="orderReturnApply.status===0" type="primary" size="default" @click="agreeApply">同意退款</el-button>
        <el-button v-if="orderReturnApply.status===0" type="" style="colore: red" size="default" @click="rejectApply">拒绝退款</el-button>
        <!-- 这个逻辑应该在状态变为等待发货 -->
        <el-button v-if="orderReturnApply.status === 1" type="primary" size="default" @click="receiveProduct">确认收货</el-button>

      </div>
    </el-card>

  </div>
</template>

<script>
import { orderReturn as orderReturnApi,
  agreeApply as agreeApplyApi,
  receiveProduct as receiveProductApi,
  rejectApply as rejectApplyApi } from '@/api/order/orderBack'
export default {
  name: 'OrderBackDetail',
  components: {

  },
  data() {
    return {
      id: '', // 退单的id,非orderId
      orderReturnApply: {}, // 退单对象
      returnForm: {
        returnAmount: 0
      }
    }
  },
  computed: {

  },
  created() {
    // 从路由参数获取id
    this.id = this.$route.params.id
    // 获取退单明细
    this.getOrderReturnApply()
  },
  mounted() {

  },
  methods: {
    getOrderReturnApply() {
      orderReturnApi(this.id)
        .then(res => {
          const { success, data, message: errMsg } = res
          if (success) {
            const { orderReturnApply } = data
            // 赋值
            this.orderReturnApply = orderReturnApply
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 同意退货
    agreeApply() {
      // 添加id选项
      this.returnForm.id = this.id
      console.log(this.returnForm)
      agreeApplyApi(this.id, this.returnForm)
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('已同意退单!')
            // 更新退单状态
            this.getOrderReturnApply()
            // 还原退单的表单对象
            this.returnForm = {
              returnAmount: 0
            }
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 拒绝退货
    rejectApply() {
      var rejectForm = {
        id: this.id,
        handleMan: this.returnForm.handleMan,
        handleNote: this.returnForm.handleNote
      }
      rejectApplyApi(this.id, rejectForm)
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('已拒绝!')
            // 更新退单状态
            this.getOrderReturnApply()
            this.returnForm = {
              returnAmount: 0
            }
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 服务端确认收货
    receiveProduct() {
      // 借用表单,处理新的接口
      var receiveForm = {
        id: this.id,
        receiveMan: this.returnForm.handleMan,
        receiveNote: this.returnForm.handleNote
      }
      receiveProductApi(this.id, receiveForm)
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('已确认收货!')
            // 更新退单状态
            this.getOrderReturnApply()
            this.returnForm = {
              returnAmount: 0
            }
          } else {
            this.$message.error(errMsg)
          }
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .order-back-detail{
    .order-title{
      margin: 20px 0;
      .title-text{
        font-size: 20px;
        font-weight: 800;
      }
      .order-status-text{
        color: orange;
        margin-left: 20px;
      }
    }
  }
</style>
